<template>
  <div class="self-info-container">
    <div class="item" v-for="(item, index) in userData" :key="index">
      <!-- <Icon :type="item.icon" /><span>{{ item.value }}</span> -->
    </div>
  </div>
</template>

<script>
import Icon from "@/components/Icon";
import { mapState, mapMutations } from "vuex";
import { getUserInfoApi } from "@/api/userInfo.js";

export default {
  components: {
    Icon,
  },
  data() {
    return {};
  },
  async created() {
    let info = await getUserInfoApi();
    this.SetUserInfo(info);
  },
  computed: {
    ...mapState(["userInfo"]),
    userData() {
      let arr = ["name", "birth", "phone", "email", "edu"];
      return this.userInfo
        ? arr.map((item) => ({ icon: item, value: this.userInfo[item] }))
        : [];
    },
  },
  methods: {
    ...mapMutations(["SetUserInfo"]),
  },
};
</script>

<style lang="less" scoped>
.self-info-container {
  margin-top: 50px;
  .item {
    color: grey;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    column-gap: 10px;
    .icon-container {
      font-size: 30px;
    }
    span {
      font-size: 20px;
    }
  }
}
</style>
